import React from 'react'
import Button from './index'
import { SIZES, SizesTypes, APPERANCES, ApperancesTypes } from './config'
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'

export default {
  title: 'Components/Button',
  component: Button,
  decorators: [withKnobs]
}

export const knobsBtn = () => (
  <Button
    size={select<SizesTypes>("size", SIZES, SIZES.medium)}
    href={text("hrefText", "")}
    link={boolean("link", false)}
    loadingText={text("loadingText", "I AM LOADING")}
    loading={boolean("loading", false)}
    disabled={boolean("disabled", false)}
    btnType={select<ApperancesTypes>(
      "btnType",
      APPERANCES,
      APPERANCES.primary
    )}
  >
    {text("childrenText", "Hello Storybook")}
  </Button>
);

export const buttons = () => (
	<>
		<Button btnType="primary">Primary</Button>
		<Button btnType="secondary">Secondary</Button>
		<Button btnType="tertiary">Tertiary</Button>
		<Button btnType="outline">Outline</Button>
		<Button btnType="primaryOutline">Outline primary</Button>
		<Button btnType="secondaryOutline">Outline secondary</Button>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button btnType="inversePrimary">Primary inverse</Button>
		</div>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button btnType="inverseSecondary">Secondary inverse</Button>
		</div>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button btnType="inverseOutline">Outline inverse</Button>
		</div>
	</>
);

export const sizes = () => (
	<>
		<Button btnType="primary">Default</Button>
		<Button btnType="primary" size="small">
			Small
		</Button>
	</>
);

export const loading = () => (
	<>
		<Button btnType="primary" loading>
			Primary
		</Button>
		<Button btnType="secondary" loading>
			Secondary
		</Button>
		<Button btnType="tertiary" loading>
			Tertiary
		</Button>
		<Button btnType="outline" loading>
			Outline
		</Button>
		<Button btnType="outline" loading loadingText="Custom...">
			Outline
		</Button>
	</>
);

export const disabled = () => (
	<>
		<Button btnType="primary" disabled>
			Primary
		</Button>
		<Button btnType="secondary" disabled>
			Secondary
		</Button>
		<Button btnType="tertiary" disabled>
			Tertiary
		</Button>
		<Button btnType="outline" disabled>
			Outline
		</Button>
	</>
);

export const link = () => (
	<>
		<Button btnType="primary" link href="/">
			Primary
		</Button>
		<Button btnType="secondary" link href="/">
			Secondary
		</Button>
		<Button btnType="tertiary" link href="/">
			Tertiary
		</Button>
		<Button btnType="outline" link href="/">
			Outline
		</Button>
	</>
);